﻿<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="客户编码" prop="cCusCode">
            <a-input disabled v-model="entity.cCusCode" autocomplete="off" placeholder="客户编码"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="客户名称" prop="cCusName">
            <a-input disabled v-model="entity.cCusName" autocomplete="off" placeholder="客户名称"/>
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item label="销售订单号" prop="cSOCode">
            <a-input disabled v-model="entity.cSOCode" autocomplete="off" placeholder="销售订单号"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="销售类型" prop="cBusType">
            <a-input disabled v-model="entity.cBusType" autocomplete="off" placeholder="销售类型"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="单据日期" prop="dDate">
            <a-date-picker disabled format="YYYY-MM-DD" style="width: 100%" v-model="entity.dDate"/>
            <!-- <a-input v-model="entity.dDate" autocomplete="off" placeholder="单据日期" /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="预发货日期" prop="dPreDateBT">
            <a-date-picker disabled format="YYYY-MM-DD" style="width: 100%" v-model="entity.dPreDateBT"/>
            <!-- <a-input v-model="entity.dPreDateBT" autocomplete="off" placeholder="预发货日期" /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="销售经理" prop="RealName">
            <a-input disabled v-model="entity.RealName" autocomplete="off" placeholder="销售经理"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="汇率" prop="iExchRate">
            <a-input disabled v-model="entity.iExchRate" autocomplete="off" placeholder="汇率"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="币种名称" prop="cexch_name">
            <a-input disabled v-model="entity.cexch_name" autocomplete="off" placeholder="币种名称"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="收货地址" prop="cCusOAddress">
            <a-textarea disabled v-model="entity.cCusOAddress" autocomplete="off"/>
            <!-- <a-input v-model="entity.cCusOAddress" autocomplete="off" placeholder="发货地址" /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="备注" prop="cMemo">
            <a-textarea disabled v-model="entity.cMemo" autocomplete="off"/>
            <!-- <a-input disabled v-model="entity.cMemo" autocomplete="off" placeholder="备注" /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="规则编码">
            <a-input disabled v-model="entity.cDefine3" autocomplete="off" placeholder="规则编码"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div>
      <a-tabs :active-key="active" @change="callback">
        <a-tab-pane key="0" tab="订单详情">
          <a-table
            ref="table"
            :scroll="{ y: 530 }"
            :columns="columns"
            :rowKey="(row, index) => index"
            :dataSource="data"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :rowClassName="rowClassName"
            :bordered="true"
            size="small">
            <span slot="iQuantity" slot-scope="iQuantity" v-format="'#,##0'">{{ iQuantity }}</span>
            <span slot="iNum" slot-scope="iNum" v-format="'#,##0'">{{ iNum }}</span>
            <span slot="iTaxRate" slot-scope="iTaxRate" v-format="'0.0%'">{{ iTaxRate / 100 }}</span>
            <span slot="iTaxUnitPrice" slot-scope="iTaxUnitPrice" v-format="'#,##0.00'">{{ iTaxUnitPrice }}</span>
            <span slot="iTax" slot-scope="iTax" v-format="'#,##0.00'">{{ iTax }}</span>
            <span slot="iSum" slot-scope="iSum" v-format="'#,##0.00'">{{ iSum }}</span>
            <span slot="foutquantity" slot-scope="foutquantity" v-format="'#,##0'">{{ foutquantity }}</span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="1" tab="发货信息">
          <a-table
            ref="table"
            :scroll="{ y: 530, x: 1000 }"
            :columns="tableColumns1"
            :rowKey="(row, index) => index"
            :dataSource="data1"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :rowClassName="rowClassName"
            :bordered="true"
            size="small">
            <span slot="ddate" slot-scope="ddate">{{ timeFormat(ddate, 'YYYY-MM-DD') }}</span>
            <span slot="iquantity" slot-scope="iquantity" v-format="'#,##0'">{{ Number(iquantity) }}</span>
            <span slot="isum" slot-scope="isum" v-format="'#,##0.00'">{{ Number(isum) }}</span>
            <span slot="isettlequantity" slot-scope="isettlequantity" v-format="'#,##0'">{{ Number(isettlequantity) }}</span>
            <span slot="isettlenum" slot-scope="isettlenum" v-format="'#,##0.00'">{{ Number(isettlenum) }}</span>
            <span slot="foutquantity" slot-scope="foutquantity" v-format="'#,##0'">{{ Number(foutquantity) }}</span>
            <span slot="iexchsum" slot-scope="iexchsum" v-format="'#,##0.00'">{{ Number(iexchsum) }}</span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="出库信息">
          <a-table
            ref="table"
            :scroll="{ y: 530 }"
            :columns="tableColumns2"
            :rowKey="(row, index) => index"
            :dataSource="data2"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :rowClassName="rowClassName"
            :bordered="true"
            size="small">
            <span slot="ddate" slot-scope="ddate">{{ timeFormat(ddate, 'YYYY-MM-DD') }}</span>
            <span slot="iquantity" slot-scope="iquantity" v-format="'#,##0'">{{ Number(iquantity) }}</span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="发票信息">
          <a-table
            ref="table"
            :scroll="{ y: 530, x: 1000 }"
            :columns="tableColumns3"
            :rowKey="(row, index) => index"
            :dataSource="data3"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :rowClassName="rowClassName"
            :bordered="true"
            size="small">
            <span slot="ddate" slot-scope="ddate">{{ timeFormat(ddate, 'YYYY-MM-DD') }}</span>
            <span slot="iquantity" slot-scope="iquantity" v-format="'#,##0'">{{ Number(iquantity) }}</span>
            <span slot="itaxunitprice" slot-scope="itaxunitprice" v-format="'#,##0.00'">{{ Number(itaxunitprice) }}</span>
            <span slot="isum" slot-scope="isum" v-format="'#,##0.00'">{{ Number(isum) }}</span>
            <span slot="imoneysum" slot-scope="imoneysum" v-format="'#,##0.00'">{{ Number(imoneysum) }}</span>
            <span slot="inomoneysum" slot-scope="inomoneysum" v-format="'#,##0.00'">{{ Number(inomoneysum) }}</span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="4" tab="收款信息">
          <a-table
            ref="table"
            :scroll="{ y: 530, x: 1000 }"
            :columns="tableColumns4"
            :rowKey="(row, index) => index"
            :dataSource="data4"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :rowClassName="rowClassName"
            :bordered="true"
            size="small">
            <span slot="dVouchDate" slot-scope="dVouchDate">{{ timeFormat(dVouchDate, 'YYYY-MM-DD') }}</span>
            <span slot="iAmt_f" slot-scope="iAmt_f" v-format="'#,##0.00'">{{ Number(iAmt_f) }}</span>
            <span slot="iAmount" slot-scope="iAmount" v-format="'#,##0.00'">{{ Number(iAmount) }}</span>
            <span slot="iRAmount" slot-scope="iRAmount" v-format="'#,##0.00'">{{ Number(iRAmount) }}</span>
            <span slot="iRAmt_f" slot-scope="iRAmt_f" v-format="'#,##0.00'">{{ Number(iRAmt_f) }}</span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '4px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
const columns = [
  // { title: '销售订单子表标识', dataIndex: 'AutoID', width: '10%' },
  // { title: '销售订单号', dataIndex: 'cSOCode' },
  { title: '产品编码', dataIndex: 'cInvCode' },
  { title: '产品名称', dataIndex: 'cInvName' },
  { title: '订单数量', dataIndex: 'iQuantity', align: 'right', width: '8%', scopedSlots: { customRender: 'iQuantity' } },
  { title: '单位', dataIndex: 'mainUnitName', align: 'center', width: '5%' },
  { title: '包装规格', dataIndex: 'cDefine23', align: 'center', width: '8%' },
  { title: '订单件数', dataIndex: 'iNum', align: 'right', width: '8%', scopedSlots: { customRender: 'iNum' } },
  { title: '单位', dataIndex: 'assUnitName', align: 'center', width: '50px' },
  { title: '税率%', dataIndex: 'iTaxRate', align: 'right', width: '80px', scopedSlots: { customRender: 'iTaxRate' } },
  { title: '含税单价(元)', dataIndex: 'iTaxUnitPrice', align: 'right', scopedSlots: { customRender: 'iTaxUnitPrice' } },
  { title: '税额(元)', dataIndex: 'iTax', align: 'right', scopedSlots: { customRender: 'iTax' } },
  { title: '价税合计(元)', dataIndex: 'iSum', align: 'right', scopedSlots: { customRender: 'iSum' } },
  { title: '出库数量', dataIndex: 'foutquantity', align: 'right', scopedSlots: { customRender: 'foutquantity' } },
  { title: '单位', dataIndex: 'mainUnitName', align: 'center', width: '50px' }
  // { title: '备注 ', dataIndex: 'cMemo' }
]
// 发货信息
const tableColumns1 = [
  { title: '单据类型', dataIndex: 'cvouchname', width: '150px' },
  { title: '发货单号', dataIndex: 'cdlcode', width: '180px' },
  { title: '发货日期', dataIndex: 'ddate', width: '120px', scopedSlots: { customRender: 'ddate' } },
  { title: '业务类型', dataIndex: 'cbustype', width: '120px' },
  { title: '销售类型', dataIndex: 'cstname', width: '120px' },
  { title: '销售部门', dataIndex: 'cdepname', width: '160px' },
  { title: '业务员', dataIndex: 'cpersonname', width: '120px' },
  { title: '币种', dataIndex: 'cexch_name', width: '180px' },
  { title: '仓库', dataIndex: 'cwhname', width: '120px' },
  { title: '产品名称', dataIndex: 'cinvname', width: '200px' },
  { title: '发货数量', dataIndex: 'iquantity', align: 'right', width: '130px', scopedSlots: { customRender: 'iquantity' } },
  { title: '单位', dataIndex: 'cinvm_unit', align: 'center', width: '50px' },
  { title: '发货金额', dataIndex: 'isum', align: 'right', width: '130px', scopedSlots: { customRender: 'isum' } },
  { title: '开票数量', dataIndex: 'isettlequantity', align: 'right', width: '130px', scopedSlots: { customRender: 'isettlequantity' } },
  { title: '开票金额', dataIndex: 'isettlenum', align: 'right', width: '130px', scopedSlots: { customRender: 'isettlenum' } },
  { title: '累计出库数量', dataIndex: 'foutquantity', align: 'right', width: '120px', scopedSlots: { customRender: 'foutquantity' } },
  { title: '单位', dataIndex: 'cinvm_unit', align: 'center', width: '50px' },
  { title: '收款金额', dataIndex: 'iexchsum', align: 'right', width: '130px', scopedSlots: { customRender: 'iexchsum' } }
]
// 出库
const tableColumns2 = [
  { title: '出库单号', dataIndex: 'ccode' },
  { title: '产品名称', dataIndex: 'cinvname' },
  { title: '单据类型', dataIndex: 'cvouchname' },
  { title: '出库日期', dataIndex: 'ddate', scopedSlots: { customRender: 'ddate' } },
  { title: '出库类别', dataIndex: 'crdname' },
  { title: '出库数量', dataIndex: 'iquantity', align: 'right', width: '130px', scopedSlots: { customRender: 'iquantity' } },
  { title: '单位', dataIndex: 'cinvm_unit', align: 'center', width: '50px' },
  { title: '批号', dataIndex: 'cbatch' },
  { title: '仓库', dataIndex: 'cwhname' }
]
// 发票
const tableColumns3 = [
  { title: '单据类型', dataIndex: 'cvouchname', width: '130px' },
  { title: '发票号', dataIndex: 'csbvcode', width: '130px' },
  { title: '日期', dataIndex: 'ddate', width: '130px', scopedSlots: { customRender: 'ddate' } },
  { title: '业务类型', dataIndex: 'cbustype', width: '130px' },
  { title: '币种', dataIndex: 'cexch_name', width: '130px' },
  { title: '仓库', dataIndex: 'cwhname', width: '180px' },
  { title: '产品编码', dataIndex: 'cinvcode', width: '130px' },
  { title: '产品名称', dataIndex: 'cinvname', width: '230px' },
  { title: '数量', dataIndex: 'iquantity', align: 'right', width: '130px', scopedSlots: { customRender: 'iquantity' } },
  { title: '单位', dataIndex: 'cinvm_unit', align: 'center', width: '50px' },
  { title: '销售单价(元)', dataIndex: 'itaxunitprice', align: 'right', width: '130px', scopedSlots: { customRender: 'itaxunitprice' } },
  { title: '销售金额(元)', dataIndex: 'isum', align: 'right', width: '130px', scopedSlots: { customRender: 'isum' } },
  { title: '收款金额(元)', dataIndex: 'imoneysum', align: 'right', width: '130px', scopedSlots: { customRender: 'imoneysum' } },
  { title: '未结算金额(元)', dataIndex: 'inomoneysum', width: '130px', align: 'right', scopedSlots: { customRender: 'inomoneysum' } }
]
// 收款
const tableColumns4 = [
  { title: '客户名称', dataIndex: 'cCusAbbName', width: '240px' },
  { title: '结算方式', dataIndex: 'cSSName', width: '100px' },
  { title: '款项类型', dataIndex: 'cType', width: '120px' },
  { title: '单据编号', dataIndex: 'cVouchID', width: '120px' },
  { title: '发货日期', dataIndex: 'dVouchDate', width: '120px', scopedSlots: { customRender: 'dVouchDate' } },
  { title: '收款金额(元)', dataIndex: 'iAmt_f', align: 'right', width: '90px', scopedSlots: { customRender: 'iAmt_f' } },
  { title: '本币金额(元)', dataIndex: 'iAmount', align: 'right', width: '90px', scopedSlots: { customRender: 'iAmount' } },
  // { title: '科目', dataIndex: 'cKm', width: '120px' },
  { title: '本币余额(元)', dataIndex: 'iRAmount', align: 'right', width: '90px', scopedSlots: { customRender: 'iRAmount' } },
  { title: '余额(元)', dataIndex: 'iRAmt_f', align: 'right', width: '90px', scopedSlots: { customRender: 'iRAmt_f' } }
]

export default {
  props: {
    parentObj: Object
  },

  data () {
    return {
      active: '1',
      columns,
      data: [],
      data4: [],
      data3: [],
      data2: [],
      data1: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      filters: {},
      sorter: { field: 'ID', order: 'desc' },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: '',
      selectedRowKeys: [],
      tableColumns1,
      tableColumns2,
      tableColumns3,
      tableColumns4
    }
  },
  watch: {},
  methods: {
    callback (key) {
      this.active = key
      if (key > 0) {
        this.getTableData(key)
      }
    },
    getTableData (key) {
      let url = ''
      if (key == 1) {
        url = '/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendDis'
      } else if (key == 2) {
        url = '/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendOut'
      } else if (key == 3) {
        url = '/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendBill'
      } else if (key == 4) url = '/OrderManagement/SO_SOMain/GetSA_ProcessGathering'
      this.$http
        .post(url, {
          Search: [
            {
              Condition: 'cSOCode',
              Keyword: this.entity.cSOCode
            }
          ]
        })
        .then(res => {
          if (res.Success) {
            this['data' + key] = res.Data
          }
        })
    },
    rowClassName (record, index) {
      if (record.cInvCode == '合计') {
        return 'heji'
      }
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    close () {
      this.visible = false
      for (let index = 1; index < 5; index++) {
        this['data' + index] = []
      }
      this.entity = {}
    },
    init () {
      this.active = '0'
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm (row, title) {
      this.init()
      this.title = title
      if (row.ID) {
        this.loading = true
        this.$http.post('/OrderManagement/SO_SOMain/GetTheData', { ID: row.ID }).then(resJson => {
          this.loading = false
          this.entity = resJson.Data
          if (this.entity['dPreDateBT']) {
            this.entity['dPreDateBT'] = moment(this.entity['dPreDateBT'])
          }
          if (this.entity['dDate']) {
            this.entity['dDate'] = moment(this.entity['dDate'])
          }
        })

        // 子表
        this.$http
          .post('/OrderManagement/SO_SODetails/GetDataListByMoreCondition', {
            PageIndex: this.pagination.current,
            PageRows: 999,
            SortField: this.sorter.field || 'ID',
            SortType: this.sorter.order,
            Search: [{ Condition: 'cSOCode', Keyword: row.cSOCode }],
            ...this.filters
          })
          .then(resJson => {
            this.loading = false
            this.data = resJson.Data
            if (this.data) {
              const pagination = { ...this.pagination }
              pagination.total = resJson.Total
              this.pagination = pagination
            }
          })
      }
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/OrderManagement/SO_SOMain/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .heji {
  position: sticky;
  bottom: 0;
  background: #fff;
  font-size: 19px;
  font-weight: bold;
}
</style>
